<template>
    <div class="home">
        <el-form :inline="true" style="flex: 1;" @submit.native.prevent>
            <el-form-item label="游戏名称">
                <el-input v-model="gameName" style="width: 120px" @keyup.enter.native="searchGameInfo"/>
            </el-form-item>
            <el-button type="primary" @click="searchGameInfo" style="margin-bottom: 18px" v-btn
                @keyup.enter.native="searchGameInfo">
                搜索
            </el-button>
            <el-button type="success" @click="openDialog" style="margin-bottom: 18px" v-btn>
                <<
            </el-button>
        </el-form>
        <div>
            <div :style="`color:${textColor1}`">
                <span style="font-size: 16px;">安** 已提交 倩女幽魂</span>
            </div>
            <div :style="`color:${textColor2}`">
                <span style="font-size: 16px;">不** 已提交 次神光之觉醒</span>
            </div>
            <div :style="`color:${textColor3}`">
                <span style="font-size: 16px;">K** 已提交 妄想山海</span>
            </div>
        </div>
        <div v-if="dataFlag">
            <el-table :data="data" v-loading="loading" :show-header="false" size="small" empty-text="暂无此游戏">
                <el-table-column prop="gameLogo" label="logo">
                    <template v-slot:default="scope">
                        <el-avatar style="border-radius:22px" shape="square" :size="80" :fit="fit" :src="scope.row.gameLogo" />
                    </template>
                </el-table-column>
                <el-table-column prop="gameName" label="游戏名" width="50" class="">
                    <template v-slot:default="scope" >
                        <span class="font-class">{{ scope.row.gameName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="gameType" label="类型" width="35">
                    <template v-slot:default="scope" >
                        <span class="font-class">{{ scope.row.gameType }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="30">
                    <template v-slot:default="scope">
                        <div class="circle"></div>
                    </template>
                </el-table-column>
                <el-table-column width="35">
                    <template v-slot:default="scope" >
                        <a class="font-class a-class">提交</a>
                    </template>
                </el-table-column>
                <el-table-column prop="initials" label="缩写" width="55">
                    <template v-slot:default="scope" >
                        <span class="font-class">{{ scope.row.initials }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="platformt" label="平台" width="35">
                    <template v-slot:default="scope" >
                        <span class="font-class">{{ scope.row.platformt }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVisible" title="新增游戏信息" width="25%" draggable @closed="closeOperate">
            <div class="form-div">
                <el-form :model="form" ref="formRef" :rules="formRules" label-width="120px">
                    <el-form-item label="游戏名称" prop="gameName">
                        <el-input v-model="form.gameName"/>
                    </el-form-item>
                    <el-form-item label="游戏类型" prop="gameType">
                        <el-input v-model="form.gameType"/>
                    </el-form-item>
                    <el-form-item label="游戏缩写" prop="initials">
                        <el-input v-model="form.initials"/>
                    </el-form-item>
                    <el-form-item label="游戏平台" prop="platformt">
                        <el-input v-model="form.platformt"/>
                    </el-form-item>
                    <el-form-item label="游戏图片" prop="gameLogo">
                        <el-upload
                            class="avatar-uploader"
                            accept="image/*"
                            action="/ic-openapi/gameInfo/uploadImage"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(formRef)" >
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Api from '~/api/index'
import Message from '~/utils/messageUtil'

const gameName = ref('')
const data = ref([])
const dataFlag = ref(false)
// 列表查询
const searchGameInfo = () => {
    if(!gameName.value) {
        return
    }
    dataFlag.value = true
    Api.searchGameInfo(
       gameName.value
    ).then((res)=>{
        data.value = res
    }) 
}

const form = ref({
    gameName: '',
    gameLogo: '',
    gameType: '',
    initials: '',
    platformt: ''
})
// 弹窗
const dialogVisible = ref(false)
const openDialog = () => {
    dialogVisible.value = true
}
// 关闭弹窗时，清空字段
const closeOperate = () => {
    dialogVisible.value = false
}
// 校验规则
const formRef = ref()
const formRules = ref({
    gameName: [{ required: true, message: '请输入游戏名称', trigger: 'blur' }],
    gameLogo: [{ required: true, message: '请上传游戏图片', trigger: 'blur' }],
    gameType: [{ required: true, message: '请输入游戏类型', trigger: 'blur' }],
    initials: [{ required: true, message: '请输入英文简写', trigger: 'blur' }],
    platformt: [{ required: true, message: '请输入游戏平台', trigger: 'blur' }]
})

// 新增
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (!valid) {
      return
    }
    Api.saveGameInfo({
        params: form.value
    }).then((res)=>{
        Message('success', '新增成功')
        dialogVisible.value = false
    }) 
  })
}

const imageUrl = ref('')
const handleAvatarSuccess = (response, uploadFile) => {
    if(response.code != 200) {
        Message('error', 上传失败)
    }
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
    form.value.gameLogo = response.data
}
const beforeAvatarUpload = (rawFile) => {
    if (rawFile.type.indexOf('image/') < 0) {
        Message('error', 只能上传图片)
        return false
    } else if (rawFile.size / 1024 / 1024 > 10) {
        Message('error', 图片大小请限制在10M以内)
        return false
    }
    return true
}

onMounted(() => {
    startCountdown()
})

const randomColor = () => {
  let r, g, b;
  r = Math.floor(Math.random() * 256);
  g = Math.floor(Math.random() * 256);
  b = Math.floor(Math.random() * 256);
  return "rgb(" +r + ',' +g+ ',' +b+ ")";
}
const textColor1 = ref('')
const textColor2 = ref('')
const textColor3 = ref('')
// 定时变色
const startCountdown = () => {
  const timer = setInterval(() => {
    textColor1.value = randomColor()
    textColor2.value = randomColor()
    textColor3.value = randomColor()
  }, 1000);
}
</script>

<style>
.home {
    margin: 50px 0 0 15px;
    width: 360px;
}
.form-div {
    margin-right: 50px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 23px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.circle {
    width: 15px;
    height: 15px;
    background-color: #67c23a;
    border-radius: 100px;
}
.font-class {
    font-size: 15px;
    font-weight: 700;
}
.a-class {
    color: #409eff;
}
</style>